<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#menu{
			list-style-type: none;
			margin: 0;
			padding: 0;
			width: 180px;
		}
		#menu li a{
			display: block;
			padding: 2px 4px;
			text-decoration: none;
			background-color: #00ccff;
			border: 2px solid #fff2bf;
		}
		#menu li a:hover{
			color: black;
			background-color: #0099ff;
			border-style: outset;
		}
		#menu li a:active{
			border-style: inset;
		}
		</style>
	</head>
	<style type="text/css">
		.one{height: 150px;
		background-color: aquamarine;
		margin-bottom: 20px;}
		.two{border-left: 2px solid aquamarine;
		border-right: 20px;}
		.three{height: 150px;
		background-color: aquamarine;
		margin-bottom: 20px; text-align: center;}
		span{padding: 10px 30px;background-color: aquamarine;}
	</style>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<span>首页</span>
		<span>文章</span>
		<span>相册</span>
		<span>Bllog</span>
		<span>论坛</span>
		<span>帮助</span>
		<h1>前言</h1>
		<p>第一段内容</p>
	    <h1>理解CSS盒子模型</h1>
		<p>第二段内容</p>
		</div>
		<div class="three">关于我们|广告服务|公司招聘</div>
	</body>
</html>